<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>dome1</title>
</head>
<body>
<canvas width="400" height="300"></canvas>
<div id="txt"></div>
<script type="text/javascript">
    var canvas = document.getElementsByTagName('canvas')[0];
    context = canvas.getContext('2d');
    context.fillStyle = '#eeeeff';
    context.fillRect(0, 0, 400, 300);
    var n = 0;
    var dx = 150;
    var dy = 150;
    var s = 100;
    context.globalCompositeOperation='and';
    context.beginPath();
    context.fillStyle = 'rgb(100,255,100)';
    context.strokeStyle = 'rgb(0,0,100)';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI / 5 * 4;
    waiteach(0,30,1,300,function(i){
        x = Math.sin(i * dig);
        y = Math.cos(i * dig);
        context.lineTo(dx + x * s, dy + y * s);
       // context.fill();
        context.stroke();
    },function(){
        context.closePath();
    });



    function waiteach( start, end,step, t,fn,endfn) {
        fn(start);
        txt.innerHTML+=start;
        if (start < end) {
            setTimeout(function() {
                start+=step;
               waiteach(start,end,step,t,fn,endfn);
            }, t);
        }else if(typeof endfn=='function'){
            endfn();
        }
    }
</script>
</body>
</html>